<template>
  <div id="app">
    <p>语文：<input type="number" v-model="chinese" /></p>
    <p>数学：<input type="number" v-model="math" /></p>
    <p>英语：<input type="number" v-model="english" /></p>
    <p>总分：{{ computedSum }}</p>
    <p>平均分:{{ computedAvg }}</p>
    <table>
      <thead>
        <tr>
          <th v-for="(value, key) in studentKeys" :key="key">{{ value }}</th>
          <!-- <th>姓名</th>
          <th>宿舍</th>
          <th>成绩</th> -->
        </tr>
      </thead>
      <tbody>
        <tr v-for="student in studentInfos" :key="student.id">
          <td>{{ student.id }}</td>
          <td>{{ student.name }}</td>
          <td>{{ student.live }}</td>
          <td>{{ student.score >= 60 ? "及格" : "挂科" }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { ref, computed, reactive } from "vue";

export default {
  name: "App",
  components: {},
  setup() {
    const chinese = ref(0);
    const math = ref(0);
    const english = ref(0);

    const computedSum = computed(() => {
      return chinese.value + math.value + english.value;
    });

    const computedAvg = computed(() => {
      return (computedSum.value / 3).toFixed(2);
    });

    const studentKeys = reactive({
      id: "学号",
      name: "姓名",
      live: "宿舍",
      score: "成绩",
    });
    const studentInfos = reactive([
      { id: "2025001", name: "张三", live: "一善书院", score: "90" },
      { id: "2025002", name: "李四", live: "双馨书院", score: "85" },
      { id: "2025003", name: "王五", live: "三创书院", score: "60" },
      { id: "2025004", name: "周六", live: "四实书院", score: "59" },
      { id: "2025005", name: "郑七", live: "拾德书院", score: "15" },
    ]);

    return {
      chinese,
      math,
      english,
      computedSum,
      computedAvg,
      studentKeys,
      studentInfos,
    };
  },
};
</script>

<style>
table {
  width: 50%;
  margin: 0 auto;
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
}

th,
td {
  padding: 8px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}
</style>
